<template>
  <div>
    <div v-if="type === 'nopopup'">
      <!-- <van-cell-group>
        <van-cell :title="label" :value="data" @click="show = !show" />

        <van-row>
          <van-col span="8" />
          <van-col span="16">
            <van-checkbox-group
              v-show="show"
              v-model="value2"
              direction="horizontal"
            >
              <van-checkbox
                v-for="l in options"
                :key="l.id"
                :name="l.value"
                shape="square"
              >
                {{ l.text }}
              </van-checkbox>
            </van-checkbox-group>
          </van-col>
        </van-row>
      </van-cell-group> -->
    </div>
    <div v-else>
      <!-- :value="value" -->
      <van-field
        :name="name"
        readonly
        clickable
        autosize
        :label="label"
        :placeholder="placeholder"
        right-icon="arrow-down"
        @click="showPopup = true"
      >
        <template #input>
          <div>
            {{ data }}
          </div>
        </template>
      </van-field>

      <!-- <van-field
        :value="data"
        readonly
        clickable
        :label="label"
        autosize
        type="textarea"
        right-icon="arrow-down"
        :placeholder="placeholder"
        @click="showPopup = true"
      /> -->
      <van-popup v-model="showPopup" :position="position" closeable>
        <van-checkbox-group v-model="value2">
          <van-cell-group>
            <van-cell
              v-for="(op, index) in options"
              :key="op.value"
              :title="op.text"
              clickable
              @click="toggle(index)"
            >
              <template #right-icon>
                <van-checkbox
                  ref="checkboxes"
                  :name="op.value"
                  shape="square"
                />
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </van-popup>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FieldCheckBox',
  props: {
    type: { type: String, default: 'popup' },
    value: { type: Array, default: () => [] },
    name: { type: String, default: '' },
    label: { type: String, default: '' },
    options: { type: Array, default: () => [] },
    placeholder: { type: String, default: '' },
    position: { type: String, default: 'bottom' }
  },

  data() {
    return {
      value_test: undefined,

      show: false,
      showPopup: false
    }
  },
  computed: {
    value2: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    data: function() {
      return this.options
        .filter(item => this.value.includes(item.value))
        .map(item => item.text)
        .join(', ')
    }
  },

  watch: {},
  async created() {},
  methods: {
    toggle(index) {
      this.$refs.checkboxes[index].toggle()
    }
  }
}
</script>

<style type="text/css"></style>
